<template>
	<view class="page">
		<view class="container">
			<!-- 菜单 -->
			<view class="menu">
				<button type="default" :class="choice == 1 ? 'btn-selected' : 'btn'" @click="click1">人数比例</button>
				<button type="default" :class="choice == 2 ? 'btn-selected' : 'btn'" @click="click2">政治面貌</button>
				<button type="default" :class="choice == 3 ? 'btn-selected' : 'btn'" @click="click3">民族</button>
				<button type="default" :class="choice == 4 ? 'btn-selected' : 'btn'" @click="click4">师资分配</button>
			</view>
			
			<!-- 图表 -->
			<view class="chart-box" v-if="choice==1">
				111
			</view>
			
			<view class="chart-box" v-if="choice==2">
				<qiun-data-charts type='pie' :chartData='columnData' :echartsH5='true'
					:echartsApp='true'></qiun-data-charts>
			</view>
			
			<view class="chart-box" v-if="choice==3">
				333
			</view>
			
			<view class="chart-box" v-if="choice==4">
				444
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choice: 1,
				columnData: {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "目标值",
						"data": [35, 36, 31, 33, 13, 34],
					}]
				}
			}
		},
		methods: {
			click1() {
				this.choice = 1;
			},
			click2() {
				this.choice = 2;
			},
			click3() {
				this.choice = 3;
			},
			click4() {
				this.choice = 4;
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: centser;
		align-items: center;
	}
	
	.menu {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* border: solid 1px red; */
		width: 640upx;
		margin-top: 50upx;
	}
	
	.btn {
		font-size: 20upx;
		width: 160upx;
		background-color: #F8F8F8;
		color: black;
	}
	
	.btn-selected {
		font-size: 20upx;
		width: 160upx;
		background-color: #00AA00;
		color: white;
	}
	
	.chart-box {
		height: 500upx;
		margin-left: 20upx;
		margin-right: 20upx;
		margin-top: 30upx;
		width: 90%;
		/* background-color: #C8C7CC; */
		
	}
	
</style>
